<template>
  <!-- 欠费人员明细 -->
  <div class="monitor-detials">
    <div class="personal-detail">
      <board-title title="欠费" bgclass="bg-qf">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_qf.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefday" @date="handleChange" />
        </div>
      </board-title>
      <div class="list-info">
        <div class="info-item">
          <div class="value-title">
            <span class="title">总欠费</span>
            <span class="value">{{ value }}<span class="unit">万元</span></span>
          </div>
        </div>
      </div>
    </div>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else>
      <div class="detail-info" v-for="(item,index) in tableData" :key="index">
        <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
        <div class="info-content">
          <div class="info-detail">
            <span class="info-name">{{ item.LEVEL_NAME }}</span>
            <span class="info-flag">{{ item.LEVEL_ID }}</span>
          </div>
          <div class="info-tc">
            <div class="info-desc">欠费总额<span style="text-decoration: none">{{ item.QF_FEE }} 万元</span></div>
            <div class="info-desc">欠费用户数
              <span v-if="item.QF_USER == 0">{{ item.QF_USER }} 户</span>
              <span v-else class="click-text" @click="userClick(item.LEVEL_ID)">{{ item.QF_USER }} 户</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"

import { morningDayArrear, morningDayArrearList } from '@/api/publicline/board.js'

export default {
  components: { boardTitle, dateTime },
  data() {
    return {
      isLoading: true,
      dayId: '',
      value: '',
      tableData: []
    };
  },
  created() {
    this.dayId = this.$route.query.dayId
    this.value = this.$route.query.value
    this.getList()
  },
  mounted() {
    this.getAccountDate()
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefday.initDateTime(dayjs(this.dayId).format('YYYY-MM-DD'), dayjs(result[0].value).format('YYYY-MM-DD'))
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.dayId = dayjs(val).format('YYYYMMDD')
      this.getMorningDayArrear()
      this.getList()
    },
     // 晨会看板-日看板-欠费
    async getMorningDayArrear() {
      const res = await morningDayArrear({ orgId: this.$dataPermission, dayId: this.dayId })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.value = info.QF_VALUE || 0
      }
    },
    // 欠费人员列表
    async getList() {
      this.isLoading = true
      const params = {
        gridId: this.$gridId,
        dayId: this.dayId,
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await morningDayArrearList(params)
      const { result, success } = res
      if (success) {
        this.tableData = result
        this.isLoading = false
      }
    },
    userClick( levelId ) {
      this.$open.call(this, '/publicline/board/arrear-user',
        {
          dayId: this.dayId,
          levelId
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/person.less';
.personal-detail {
    background: #FFFFFF;
    box-shadow: 0 2px 4px 1px #f3f7fa;
    border-radius: 6px;
    margin: 12px 8px 6px;

    .list-info {
      padding: 4px 16px 6px 34px;
      .title {
        margin-top: 4px;
        color: #333;
      }
      .value-title .title::before {
        content: '';
        width: 6px;
        height: 6px;
        border: 1px solid #4d98ff;
        display: inline-block;
        border-radius: 4px;
        margin-right: 8px;
        margin-left: -12px;
      }
      .value {
        padding-left: 8px;
        font-size: 20px;
        color: #4D98FF;
      }
      .unit {
        font-size: 14px;
      }
    }
  }
.detail-info {
  .info-detail {
    display: flex;
    align-items: center;
  }
  .info-tc {
    flex-wrap: wrap;
  }
  .info-desc {
    width: 50%;
    > span {
      padding-left: 12px;
    }
    .click-text {
      color: #4D98FF;
      text-decoration: underline;
    }
  }
}
/deep/ .seller {
  .van-cell,
  .van-cell--clickable:active {
    background-color: unset;
  }
  .van-cell::after {
    border-bottom: unset;
  }
}
/deep/ .van-loading {
  text-align: center;
  padding: 40px 0;
}
</style>